
import React, {Component} from 'react';
import {Platform, StyleSheet, Text, View, Image , TouchableOpacity} from 'react-native';
import img_arr from "./img_arr";
import {Util} from './../util';
import TWebView from './../twebView'

const instructions = Platform.select({
    ios: 'Press Cmd+R to reload,\n' + 'Cmd+D or shake for dev menu',
    android:
        'Double tap R on your keyboard to reload,\n' +
        'Shake or press menu button for dev menu',
});

type Props = {};
export default class topic extends Component<Props> {
    constructor(props){
        super(props);
        const {navigation,data} = props;
        this.state={
            navigation: navigation,
            data: data
        }
    }
    render() {
        var data = this.state.data;
        var views = [];
        for (var i in data){
            views.push(
                <TouchableOpacity style={styles.img_item} key={i} onPress={this._showWebPage.bind(this,data[i].url)}>
                    <Image style={styles.img} source={img_arr[data[i].img]}/>
                </TouchableOpacity>
            );

        }
        return (
            <View style={styles.container}>
                <View>
                    <Text style={styles.text1}>推荐专题</Text>
                </View>
                <View style={styles.img_view}>
                    {views}
                </View>
                <View>
                    <Text style={styles.text2}>查看更多同期专题&gt;</Text>
                </View>
            </View>
        );
    }
    _showWebPage(url) {
        this.state.navigation.navigate('TwebView',{url: url});
    }
}

const styles = StyleSheet.create({
    container:{
        marginLeft: 10,
        marginRight: 10,
    },
    img: {
        width: (Util.size.width - 30)/2,
        height: 80,
        borderRadius:5,
        resizeMode: 'cover'
    },
    img_view: {
        flexDirection: 'row'
    },
    img_item: {
        flex: 1,
    },
    text1:{
       color: '#5E5E5E',
        marginBottom: 8,
        fontSize: 16,
    },
    text2:{
        color: '#ccc',
        marginTop: 10,
        fontSize: 13,
        fontWeight: '300',
        marginBottom: 10,
    }


});